<template>
  <div class="UserNewsbox">
    <div class="bodybox">
      <div class="title">
        <div>
          <el-radio-group v-model="radio2" size="small" @change="changetype">
            <el-radio-button label="1" >全部消息</el-radio-button>
            <el-radio-button label="2">已读</el-radio-button>
            <el-radio-button label="3">未读</el-radio-button>
          </el-radio-group>
        </div>
        <div><TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile></div>
      </div>
      <div class="tablebox">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :size="issize"
          border
          :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
          v-loading="loading"
          height="calc(100% - 1px)">
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
          <el-table-column
            type="selection"
            align="center"
            :selectable="checkSelectable"
            width="55">
          </el-table-column>
          <el-table-column
            type="index"
            width="80"
            align="center"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="messageType"
            label="消息类型">
          </el-table-column>
          <el-table-column
            prop="messageTitle"
            label="标题">
          </el-table-column>
          <el-table-column
            prop="messageContent"
            label="消息内容">
          </el-table-column>
          <el-table-column
            align="center"
            prop="sendTime"
            label="发布日期">
          </el-table-column>
          <el-table-column
            prop="messageState"
            align="center"
            label="消息状态">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="操作">
            <template #default="{row}">
              <span>
                <el-tooltip class="item" effect="dark" content="浏览" placement="top">
                  <i @click="chakan(row)" class="el-icon-view" style="color: #1a90fe;cursor: pointer;"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="已读" placement="top">
                  <i v-if="!row.isPublic&&row.messageState=='未读'" @click="yidu(row)" class="el-icon-chat-dot-round" style="color: #fdd143;cursor: pointer;margin-left: 10px;"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <i v-if="!row.isPublic" @click="delet(row)" class="el-icon-delete" style="color: red;cursor: pointer;margin-left: 10px;"></i>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部分页 -->
      <div class="fenye">
        <span>
          <el-button type="primary" size="small" @click="yidu('biaoji')">标记已读</el-button>
          <el-button type="primary" size="small" @click="yidu('quanbu')">全部已读</el-button>
          <el-button type="primary" size="small" @click="delet('biaojishanchu')">标记删除</el-button>
          <el-button type="primary" size="small" @click="delet('biaojiquanshan')">全部删除</el-button>
        </span>
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="pageobj.pageNo"
          :page-size="20"
          @current-change="xiangqinglist"
          :total="+totalCounts">
        </el-pagination>
      </div>
      <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="40%">
        <div>
          <el-form ref="form" :model="form" label-width="80px">
              <el-col :span="24">
                 <el-form-item label="标题">
                   <el-input v-model="form.messageTitle" placeholder="请输入标题" size="small"></el-input>
                 </el-form-item>
              </el-col>
              <el-col :span="24">
                 <el-form-item label="消息内容">
                   <el-input v-model="form.messageContent" type="textarea" placeholder="请输入消息内容" size="small"></el-input>
                 </el-form-item>
              </el-col>
              <el-col :span="24">
                 <el-form-item label="附件">
                   <img src="" alt=" ">
                 </el-form-item>
              </el-col>
              <el-col :span="24">
                 <el-form-item label="接收时间">
                   <el-input v-model="form.messageTitle" placeholder="请输入接收时间" size="small"></el-input>
                 </el-form-item>
              </el-col>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {exportexcel} from '@/utils/excel'
import {getusernewslistapi,postyilooksapi,postdellistapi} from '@/api/system/UserNews'
import TopTile from '@/components/TopTitle/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile
  },
  data() {
    return {
      issize:'medium',
      radio2: '1',
      loading: false,
      totalCounts: '',
      pageobj: {
        pageNo: 1,
        pageSize:20
      },
      datalist:[],
      tableData: [],
      dialogVisible: false,
      checklist:[],
      form:{}
    };
  },

  mounted() {
    this.xiangqinglist()
  },

  methods: {
    // 获取表格数据
    async xiangqinglist() {
      this.loading=true
      const { data: { list ,totalCount} } = await getusernewslistapi({
        pageNo:this.pageobj.pageNo-1,pageSize:this.pageobj.pageSize
      })
      this.tableData = list
      this.datalist=list
      this.totalCounts=totalCount
      this.loading = false
    },
    // 表格单选/多选
    handleSelectionChange(val) {
      this.checklist=val
    },
    // 查看详情
    chakan(row) {
      this.form={...row}
      this.dialogVisible = true
      if(!row.isPublic){
        this.chuliyidu(row.id,'2')
        this.xiangqinglist()
        this.changetype(this.radio2)
      }
    },
    // 已读操作
    yidu(val) {
      if(!this.checklist.length&&val == 'biaoji')return this.$message.warning('请先勾选数据')
      this.$confirm(`此操作将${val == 'biaoji' ? '选中数据标记为已读' : val == 'quanbu' ?'所有数据标记为已读':'该数据标记为已读'}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (val == 'biaoji') {
            const ids = this.checklist.map(ele => ele.id)
            this.chuliyidu(ids.join(','),'2')
          } else if (val == 'quanbu') {
            const ids = this.datalist.map(ele => {
              if (!row.isPublic) {
                return ele.id
              }
            })
            this.chuliyidu(ids.join(','),'1')
          } else {
            this.chuliyidu(val.id,'2')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 已读处理
    async chuliyidu(ids,readAlreadyAllFlag) {
      await postyilooksapi({ ids, readAlreadyAllFlag }).then(res=>{
        this.$message({
          type:res.code=='200'?'success':'warning',
          message:res.code=='200'?'已读成功':res.message
        })
      })
      this.xiangqinglist()
      this.changetype(this.radio2)
    },
    // 删除
    delet(val) {
      if(!this.checklist.length&&val == 'biaojishanchu')return this.$message.warning('请先勾选数据')
      this.$confirm(`此操作将${val == 'biaojishanchu' ? '会删除选中数据' : val == 'biaojiquanshan' ?'会删除所有数据':'会删除该数据'}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (val == 'biaojishanchu') {
            const ids = this.checklist.map(ele => ele.id)
            this.dellist(ids.join(','),'2')
          } else if (val == 'biaojiquanshan') {
            const ids = this.datalist.map(ele => {
              if (!val.isPublic) {
                return ele.id
              }
            })
            this.dellist(ids.join(','),'1')
          } else {
            this.dellist(val.id,'2')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 删除处理
    async dellist(ids,deleteAllFlag) {
      await postdellistapi({ ids, deleteAllFlag }).then(res=>{
        this.$message({
          type:res.code=='200'?'success':'warning',
          message:res.code=='200'?'删除成功':res.message
        })
      })
      this.xiangqinglist()
      this.changetype(this.radio2)
    },
    // 类型切换
    changetype(val) {
      this.loading=true
      if (val=='2') {
        this.tableData=this.datalist.filter(ele=>ele.messageState=='已读')
      } else if (val == '3') {
        this.tableData=this.datalist.filter(ele=>ele.messageState=='未读')
      } else {
        this.tableData=this.datalist
      }
      this.loading=false
    },
    // 表格单选禁用
    checkSelectable(row) {
      console.log(row);
      if (row.isPublic==1) {
        return false
      } else {
        return true
      }
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('sst-microservice-biz/sst/message/user/exportExcel',{},'用户测消息')
    },
    // 刷新列表
    shuaxin() {
      this.xiangqinglist()
      this.changetype(this.radio2)
      this.$message.success('列表刷新成功')
    },
  },
};
</script>

<style scoped>
.UserNewsbox{
  height: 100%;
  padding: 10px;
  .bodybox{
    height: 100%;
    padding: 20px;
    background-color: #fff;
    .title{
      display: flex;
      justify-content: space-between;
    }
    .tablebox{
      height: 90%;
      margin: 10px 0;
    }
    .fenye{
      display: flex;
      justify-content: space-between;
    }
  }
}
::v-deep .el-dialog__footer{
  text-align: center;
}
</style>